<template>
  <div class="sidebar">
    <div class="action-button">
      <IconButton :icon="ExitIcon" backgroundColor="#ff4e4e"></IconButton>
      <IconButton
        :icon="MinIcon"
        backgroundColor="#f3c910"
        :on-click="changeTightBorderFalse"
      ></IconButton>
      <IconButton
        :icon="MaxIcon"
        backgroundColor="#04c204"
        :on-click="changeTightBorderTrue"
      ></IconButton>
    </div>

    <div class="sidebar-header">
      <img :src="ChatgptIcon" alt="" @click="router.push({ path: '/chat' })"/>
    </div>

    <div class="sidebar-chat" @click="router.push({ path: '/chat' })">
      <img :src="ChatIcon" alt="chat" />
    </div>

    <div class="sidebar-role" @click="router.push({ path: '/role' })">
      <img :src="RoleIcon" alt="" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import IconButton from '@/components/button/IconButton.vue';
import ExitIcon from '@/icons/exit.svg';
import MinIcon from '@/icons/min.svg';
import MaxIcon from '@/icons/max.svg';
import ChatgptIcon from '@/icons/chatgpt.svg';
import ChatIcon from '@/icons/chat.svg';
import RoleIcon from '@/icons/role.svg';
import { useConfigStore } from '@/store/useConfigStore';

const config = useConfigStore();
const router = useRouter();

const changeTightBorderTrue = () => {
  config.update((config) => {
    config.tightBorder = true;
  });
};

const changeTightBorderFalse = () => {
  config.update((config) => {
    config.tightBorder = false;
  });
};
</script>

<style scoped lang="scss">
.sidebar {
  top: 0;
  width: var(--sidebar-width);
  height: var(--full-height);
  position: relative;
  background-color: #f5f5f5;
}

.action-button {
  width: 100%;
  display: inline-flex;
  margin-top: 3px;
  margin-left: 5px;

  .svg {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  &:hover {
    .svg {
      opacity: 1;
    }
  }
}

.sidebar-header {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  position: relative;
  margin: 65px auto 0;
  border: #c7c7c7 1px solid;
  &:hover {
    cursor: pointer;
  }
}

.sidebar-chat {
  width: 34px;
  height: 34px;
  position: relative;
  margin: 24px auto 0;

  &:hover {
    cursor: pointer;
  }
}

.sidebar-role {
  width: 34px;
  height: 34px;
  position: relative;
  margin: 15px auto 0;

  &:hover {
    cursor: pointer;
  }
}
</style>
